<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>keyword_list</title>
    <!-- Bootstrap -->
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/custom/css/item_list.css}" rel="stylesheet">

</head>
<body>
<div class="container">
    <div class="text-center caption">
        <h2>关键字管理</h2>
        <div class="controlBtn">
            <button class="btn btn-default" type="button" id="backBtn">返回</button>
        </div>
    </div>
    <div class="form-horizontal search">
        <div class="form-group">
            <label for="brandSelect1" class="col-md-1 col-md-offset-4 control-label">品牌名称</label>
            <div class="col-md-2">
                <select class="form-control" id="brandSelect1"></select>
            </div>
            <button class="col-md-1 btn btn-default" type="button" id="queryBtn">查询</button>
        </div>
    </div>
    <div class="table-responsive">
        <table class="table table-hover table-condensed table-bordered text-center">
            <thead>
            <th>序号</th>
            <th>品牌名称</th>
            <th>关键字</th>
            <th>限价</th>
            <th>操作</th>
            </thead>
            <tr data-th-each="keyword : ${keywordList}">
                <td data-th-text="${keyword.id}">...</td>
                <td data-th-text="${keyword.brandName}">...</td>
                <td data-th-text="${keyword.keywordName}">...</td>
                <td data-th-text="${keyword.keywordCordon}">...</td>
                <td>
                    <button class="btn btn-default btn-xs" type="button" id="updateBtn">修改</button>
                    <button class="btn btn-default btn-xs" type="button" id="deleteBtn">删除</button>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <select class="form-control text-center" id="brandId"></select>
                </td>
                <td><input type="text" class="form-control text-center" id="keywordName"></td>
                <td><input type="text" class="form-control text-center" id="keywordCordon"></td>
                <td>
                    <button class="btn btn-default btn-xs" type="button" id="addBtn" data-toggle="modal"
                            data-target="#myModal">新增</button>
                </td>
            </tr>
        </table>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <p id="message"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/bootstrap/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.min.js}"></script>

<script type="text/javascript">
    function getBrandAjax() {
        $.ajax({
            url: "brandAjax",
            dataType: 'json',
            success: function (result) {
                $('#brandSelect').html('');
                for (let el of result) {
                    $("#brandSelect1").append("<option value='" + el.id + "'>" + el.brandName + "</option>");
                    $("#brandId").append("<option value='" + el.id + "'>" + el.brandName + "</option>");
                }
            }
        })
    }
</script>

<script type="text/javascript">
    $(function () {
        var needReload = false;
        // 页面初始化加载
        getBrandAjax();

        $('#backBtn').click(function () {
            window.location.href = "/items";
        })
//        $('#queryBtn').click(function () {
//
//        })
        $('#addBtn').click(function () {
            vBrandId = $('#brandId').val();
            if(vBrandId == null || vBrandId == '') {
                $('#message').html("品牌名称不能为空，请选择！");
                $('#myModal').modal('show');
                return false;
            }
            vKeywordName = $('#keywordName').val();
            if(vKeywordName == null || vKeywordName == '') {
                $('#message').html("关键字不能为空，请输入！");
                $('#myModal').modal('show');
                return false;
            }
            vKeywordCordon = $('#keywordCordon').val();
            if(vKeywordCordon == null || vKeywordCordon == '') {
                $('#message').html("限价不能为空，请输入！");
                $('#myModal').modal('show');
                return false;
            }
            var param = {
                brandId: vBrandId,
                keywordName: vKeywordName,
                keywordCordon: vKeywordCordon
            }
            $.ajax({
                type: 'post',
                url: "/keyword",
                contentType: "application/json",
                data: "text",
                data: JSON.stringify(param),
                cache: false,
                success: function (result) {
                    alert(result);
                    location.reload();
                }
            })
        })
    })
</script>
</body>
</html>